<template>

  <el-container class="reportReviewItem">

    <el-header v-if="queryParams.length > 0">
      <el-form size="mini" :inline="true">
        <template v-for=" param in queryParams">
          <el-form-item :label="param.paramLabel" :key="param.paramId">
            <el-input v-if="param.paramDataType == 'TEXT'" v-model="param.value"></el-input>

            <el-input-number v-if="param.paramDataType == 'NUMBER'" v-model="param.value"></el-input-number>

            <el-select
              v-if="param.paramDataType == 'SINGLE_SELECT' || param.paramDataType == 'MULTIPLE_SELECT'"
              :multiple="param.paramDataType == 'SINGLE_SELECT' ? false : true"
              v-model="param.value"
            >
              <el-option
                v-for="opt in tryParseJson(param.paramDatasourceContent)"
                :key="opt.key"
                :label="opt.key"
                :value="opt.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>

        <el-form-item v-if="queryParams.length > 0">
          <el-button type="primary" @click="doQuery">生成图表</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    
    <el-main  style="height:100%">

      <ChartReview v-if="displayType == 'CHART'" ref="chartView" :reportName="reportDetail.reportName" :templateConf="templateConf" :relations="relations" :reportData="reportData" ></ChartReview>

      <TableReview v-if="displayType == 'TABLE'" ref="chartView" :reportName="reportDetail.reportName" :templateConf="templateConf" :relations="relations" :reportData="reportData" ></TableReview>

    </el-main>

  </el-container>

</template>

<script>
import ChartReview from './ChartReview.vue';

import TableReview from './TableReview.vue';
export default {
  props: ["reportId"],

  data() {
    return {
      queryParams: [],
      reportData: [],
      templateConf: {},
      relations: [],
      displayType:'',
      reportDetail:{}
    };
  },

  components:{
    ChartReview,
    TableReview
  },

  mounted() {
 
    this.loadReportQueryParams();
 
  },

  methods: {

    resize(){

        if(this.displayType == "CHART"){

            this.$refs.chartView.resize();
        }

    },

    tryParseJson(str) {
      try {
        return JSON.parse(str);
      } catch (e) {
        return [];
      }
    },




    doQuery() {



      let params = {
        reportId: this.reportId,
        params: {}
      };

      for (let index in this.queryParams) {
        let val = this.queryParams[index].value;

        if (val == undefined) {
          val = "";
        }

        params.params[this.queryParams[index].paramName] = val;
      }

      this.$axios
        .post("/report/doQuery", params)
        .then(d => {
          this.reportData = d.data;

          if(this.displayType == 'CHART'){

            this.$refs.chartView.displayReport();
          }
 
        })
        .catch(e => {
        
          this.$notify.error({
            title: "失败",
            message: "查询失败"
          });
        });
    },

    
    loadRelations() {
      this.$axios
        .get("/report/getRelations?reportId=" + this.reportId)
        .then(d => {
          this.relations = d.data;
          
          if(this.queryParams.length == 0){
            this.doQuery();
          }
        })
        .catch(e => {
          this.$notify.error({
            title: "失败",
            message: "模板加载失败"
          });
        });
    },
    loadReportDetail() {
      this.$axios
        .get("/report/getReportDetail?reportId=" + this.reportId)
        .then(d => {
          
          this.reportDetail = d.data;
          this.loadRelations();
        })
        .catch(e => {
          this.$notify.error({
            title: "失败",
            message: "报表信息加载失败"
          });
        });
    },

    loadTemplate() {
      this.$axios
        .get("/report/getTemplateByReport?reportId=" + this.reportId)
        .then(d => {
          this.templateConf = d.data;
          this.displayType = d.data.displayType;
          this.loadReportDetail();
        })
        .catch(e => {
          this.$notify.error({
            title: "失败",
            message: "模板加载失败"
          });
        });
    },

    loadReportQueryParams() {

      if(this.reportId == '' || this.reportId == undefined){

        return;

      }


      this.$axios
        .get("/report/getReportQueryParams?reportId=" + this.reportId)
        .then(d => {
          this.queryParams = d.data;

          this.loadTemplate();

        })
        .catch(e => {
          this.$notify.error({
            title: "失败",
            message: "参数加载失败"
          });
        });
    }
  }

  ,
  watch:{
    reportId(nv,ov){

        this.loadReportQueryParams();
    }
  }
   
};
</script>

<style scoped>
.reportReviewItem {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  flex-wrap: wrap;
}
.main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
</style>
